<template>
	<div>
		<ma-body>
			<div slot="header">
				<div style="padding: 2.67vw 5.33vw;">
					<image src="../../../static/img/isBack.png" mode="aspectFill" style="width: 8.53vw;height: 8.53vw;" @tap="toBack"></image>
				</div>
				<div class="header-list">
					<span class="header-item jiu-font28-555L" :class="{'active':currIndex == 0}" @tap="onSelec(0)">已注册<block v-if="page0.total > 0">·{{ page0.total }}</block></span>
					<span class="header-item jiu-font28-555L" :class="{'active':currIndex == 1}" @tap="onSelec(1)">已绑卡<block v-if="page1.total > 0">·{{ page1.total }}</block></span>
					<span class="header-item jiu-font28-555L" :class="{'active':currIndex == 2}" @tap="onSelec(2)">已认证<block v-if="page2.total > 0">·{{ page2.total }}</block></span>
				</div>
			</div>
			<div slot="content" class="content">
				<swiper :current="currIndex" @change="onChange">
					<swiper-item>
						<ma-refresh :safeBotttom="false" pageName="page0">
							<block v-if="page0.list.length > 0">
								<div class="item-box" v-for="item in page0.list" style="display: flex;align-items: center;justify-content: space-between;background-color: #1b1b1b;padding: 4.27vw 5.33vw;margin-top: 0.27vw;">
									<div class="left">
										<image :src="item.avatar" mode="aspectFill" class="header"></image>
										<div class="column">
											<span class="jiu-font28-fff">{{ item.nickname }}</span>
											<span class="jiu-font24-555">{{ item.phone.replace(item.phone.substring(3,7),"****") }}</span>
										</div>
									</div>
									<!-- :class="[ item.isReal == 1 ? 'auth' : 'register' ]" -->
									<span class="text register">
										已注册
									</span>
								</div>
							</block>
							<block v-else>
								<div class="img-box">
									<image src="@/static/img/noProduct.png" mode="aspectFill"
										style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
								</div>
							</block>
						</ma-refresh>
					</swiper-item>
					<swiper-item>
						<ma-refresh :safeBotttom="false" pageName="page1">
							<block v-if="page1.list.length > 0">
								<div class="item-box" v-for="item in page1.list" style="display: flex;align-items: center;justify-content: space-between;background-color: #1b1b1b;padding: 4.27vw 5.33vw;margin-top: 0.27vw;">
									<div class="left">
										<image :src="item.avatar" mode="aspectFill" class="header"></image>
										<div class="column">
											<span class="jiu-font28-fff">{{ item.nickname }}</span>
											<span class="jiu-font24-555">{{ item.phone.replace(item.phone.substring(3,7),"****") }}</span>
										</div>
									</div>
									<span class="text register">已绑卡</span>
								</div>
							</block>
							<block v-else>
								<div class="img-box">
									<image src="@/static/img/noProduct.png" mode="aspectFill"
										style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
								</div>
							</block>
						</ma-refresh>
					</swiper-item>
					<swiper-item>
						<ma-refresh :safeBotttom="false" pageName="page2">
							<block v-if="page2.list.length > 0">
								<div class="item-box" v-for="item in page2.list" style="display: flex;align-items: center;justify-content: space-between;background-color: #1b1b1b;padding: 4.27vw 5.33vw;margin-top: 0.27vw;">
									<div class="left">
										<image :src="item.avatar" mode="aspectFill" class="header"></image>
										<div class="column">
											<span class="jiu-font28-fff">{{ item.nickname }}</span>
											<span class="jiu-font24-555">{{ item.phone.replace(item.phone.substring(3,7),"****") }}</span>
										</div>
									</div>
									<span class="text auth">已认证</span>
								</div>
							</block>
							<block v-else>
								<div class="img-box">
									<image src="@/static/img/noProduct.png" mode="aspectFill"
										style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
								</div>
							</block>
						</ma-refresh>
					</swiper-item>
				</swiper>
			</div>
		</ma-body>
	</div>
</template>

<script>
	import Refresh from '@/$ma/common/js/refresh.js';
	export default {
		data() {
			return {
				page0: new Refresh(this, {
					apiName: 'getInviteDetail',
					apiData: {
						// isRael: null
					},
					id: 0
				}),
				page1: new Refresh(this, {
					apiName: 'getInviteDetail',
					apiData: {
						isBind: 1
					},
					id: 0
				}),
				page2: new Refresh(this, {
					apiName: 'getInviteDetail',
					apiData: {
						isRael: 1
					},
					id: 0
				}),
				currIndex: 0,
			}
		},
		methods: {
			onSelec(e){
				this.currIndex = e;
			},
			onChange(e){
				this.currIndex = e.detail.current;
			}
		},
		onLoad(e){
			this.page0.id = e.id;
			this.page1.id = e.id;
			this.page2.id = e.id;
			this.page0.onRefresh();
			this.page1.onRefresh();
			this.page2.onRefresh();
		}
	}
</script>

<style lang="scss">
	.img-box {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.column{
		display: flex;
		flex-direction: column;
	}
	swiper {
		height: 100%;
	}

	.content {
		height: 100%;
	}

	.header-list {
		width: 100%;
		display: flex;
		justify-content: space-around;
		text-align: center;
		line-height: 12.8vw;

		.header-item {
			width: calc(100% / 2);
		}
	}

	.active {
		color: #FFCE80;
		font-weight: 500;
		border-bottom: 2px solid #FFCE80;
	}

	.header {
		width: 13.07vw;
		height: 13.07vw;
		border-radius: 50%;
		margin-right: 2.13vw;
	}

	.item-box{
		margin-top: 0.27vw;
		padding: 4.27vw 5.33vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #1b1b1b;
		.left{
			display: flex;
			align-items: center;
		}
		.text{
			font-size: 3.73vw;
			font-weight: 300;
			display: block;
		}
	}
	.register{
		color: #A972FF;
	}
	.auth{
		color: #A2DD29;
	}
</style>
